<!--
 * @Description: transation组件使用
 * @Author: ZhangHan
 * @Date: 2025-05-08 16:21:19
 * @LastEditTime: 2025-05-08 17:32:07
 * @LastEditors: ZhangHan
-->
<template>
  <div class="w-full h-full bg-white box-border p-4">
    <ElTabs v-model="activeName" class="demo-tabs">
      <ElTabPane label="过渡淡入淡出" name="1">
        <div class="w-full h-48">
          <ElButton @click="show = !show">Toggle</ElButton>
          <Transition>
            <div v-if="show">
              <div>hello</div>
              <div>hello</div>
              <div>hello</div>
              <div>hello</div>
              <div>hello</div>
              <div>hello</div>
            </div>
          </Transition>
        </div>
      </ElTabPane>
      <ElTabPane label="折叠过渡2" name="2">
        <ElButton @click="show2 = !show2" class="mb-4">展开折叠</ElButton>
        <Transition name="collapse">
          <div v-if="show2" class="bg-green-300 w-20 h-48">
            <div class="mb-1">静夜思</div>
            <div class="mb-1">李白</div>
            <div class="mb-1">床前明月光，</div>
            <div class="mb-1">疑是地上霜。</div>
            <div class="mb-1">举头望明月，</div>
            <div class="mb-1">低头思故乡。</div>
          </div>
        </Transition>
      </ElTabPane>
      <ElTabPane label="过渡3" name="3">
        <ElButton @click="show3 = !show3" class="mb-4">过渡3</ElButton>
        <Transition name="slide-fade">
          <p v-if="show3">hello</p>
        </Transition>
      </ElTabPane>
      <ElTabPane label="scale折叠" name="4">
        <ElButton @click="show4 = !show4" class="mb-4">过渡3</ElButton>
        <Transition name="scale">
          <div v-if="show4" class="bg-yellow-300 w-20 h-48">
            <div class="mb-1">静夜思</div>
            <div class="mb-1">李白</div>
            <div class="mb-1">床前明月光，</div>
            <div class="mb-1">疑是地上霜。</div>
            <div class="mb-1">举头望明月，</div>
            <div class="mb-1">低头思故乡。</div>
          </div>
        </Transition>
      </ElTabPane>
      <ElTabPane label="animate动画" name="5">
        <ElButton @click="show5 = !show5" class="mb-4">动画效果</ElButton>
        <Transition name="bounce">
          <div v-if="show5" class="bg-yellow-300 w-20 h-48">
            <div class="mb-1">静夜思</div>
            <div class="mb-1">李白</div>
            <div class="mb-1">床前明月光，</div>
            <div class="mb-1">疑是地上霜。</div>
            <div class="mb-1">举头望明月，</div>
            <div class="mb-1">低头思故乡。</div>
          </div>
        </Transition>
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElTabs, ElTabPane, ElButton } from "element-plus";

const activeName = ref("1");
const show = ref(true);
const show2 = ref(true);
const show3 = ref(true);
const show4 = ref(true);
const show5 = ref(true);
</script>

<style scoped lang="less">

@import './index.less';

</style>
